<script>
import Moveable, { MoveableManagerInterface, Renderer } from "vue3-moveable";
import { ref } from "vue";


export default {
  components: { Moveable },
  setup() {
    const targetRef = ref(null);
    const onDrag = e => {
      e.target.style.transform = e.transform;
    };
    const onResize = e => {
      e.target.style.width = `${e.width}px`;
      e.target.style.height = `${e.height}px`;
      e.target.style.transform = e.drag.transform;
    };
    const onRotate = e => {
      e.target.style.transform = e.drag.transform;
    };
    return { targetRef, DimensionViewable, onDrag, onResize, onRotate };
  }
};
</script>
<template>
  <div class="container">
    <div
        class="target"
        ref="targetRef"
    >Target</div>
    <Moveable
        :target="targetRef"
        :ables="[DimensionViewable]"
        :draggable="true"
        :resizable="true"
        :rotatable="true"
        :props="({ dimensionViewable: true })"
        @drag="onDrag"
        @resize="onResize"
        @rotate="onRotate"/>
  </div>
</template>